<!-- in 单行输入 -->
<template>
  <el-form-item class="c-item" :label="name" :rules="required ? { required: true, message: `${name}必填` } : rules" :prop="prop" v-if="!hide">
    <!-- 插槽 -->
     <slot v-if="type === 'slot'" :name="prop"></slot>
    <!-- 普通输入框 -->
    <el-input
      v-else-if="type === 'text'"
      type="text"
      :model-value="modelValue"
      @input="onInput"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
    />
    <!-- 数字输入框 -->
    <el-input
      v-else-if="type === 'num'"
      type="number"
      :model-value="modelValue"
      @input="onInput"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
    />
    <!-- 电话 -->
    <el-input
      v-else-if="type === 'tel'"
      type="number"
      :maxlength="11"
      :model-value="modelValue"
      @input="onInput"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
    />
    <!-- 密码输入框 -->
    <el-input
      v-else-if="type === 'password'"
      type="password"
      :model-value="modelValue"
      @input="onInput"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
    >
      <template #suffix>
        <slot name="suffix"></slot>
      </template>
    </el-input>
    <!-- 字典下拉框 -->
    <el-select v-else-if="type === 'dictSelect'" :model-value="modelValue" :placeholder="placeholder" @change="selectChange">
      <el-option v-for="item in dicts[dictName]" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <!-- 普通下拉框 -->
    <el-select 
    v-else-if="type === 'select'" 
    :model-value="modelValue" 
    placeholder="请选择" 
    filterable
    remote
    clearable
    :remote-method="remoteMethod"
    @change="selectChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <!-- 多行输入框 -->
    <el-input
      v-else-if="type === 'textarea'"
      type="textarea"
      :model-value="modelValue"
      @input="onInput"
      :autosize="{ minRows: 3, maxRows: 10 }"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
    ></el-input>
    <!-- 日期 -->
    <el-date-picker
      v-else-if="type === 'date'"
      type="date"
      v-model="spareValue"
      @change="onInput"
      value-format="YYYY-MM-DD"
      :placeholder="placeholder"
      :disabled="disabled"
    ></el-date-picker>
    <!-- 日期时间 -->
    <el-date-picker
      v-else-if="type === 'datetime'"
      type="datetime"
      v-model="spareValue"
      @change="onInput"
      value-format="YYYY-MM-DD HH:mm:ss"
      :placeholder="placeholder"
      :disabled="disabled"
    ></el-date-picker>
    <!-- 时间 -->
    <el-time-picker
      v-else-if="type === 'time'"
      type="datetime"
      v-model="spareValue"
      @change="onInput"
      value-format="HH:mm:ss"
      :placeholder="placeholder"
      :disabled="disabled"
    ></el-time-picker>
    <!-- 滑块参数 -->
    <el-slider v-else-if="type === 'slider'" :model-value="modelValue" @input="onInput" :disabled="disabled"></el-slider>
    <!-- 颜色输入 -->
    <div v-else-if="type === 'color'" style="line-height: 0">
      <el-color-picker :model-value="modelValue" @change="onInput" :disabled="disabled"></el-color-picker>
    </div>
    <!-- 评分组件 -->
    <div v-else-if="type === 'rate'" style="line-height: 0">
      <el-rate :model-value="modelValue" @change="onInput" show-text :disabled="disabled"></el-rate>
    </div>
    <!-- img 图片 -->
    <template v-else-if="type === 'img'">
      <div class="img-box" v-for="(url, index) in _accessoryUrls" :key="index">
        <img :src="url" class="nar-img" @click="sa.showImage(url, '400px', '400px')" alt="img" />
        <el-icon size="19" class="close" color="#c30707" @click="removeImg(index)"><el-icon-CircleCloseFilled /></el-icon>
      </div>
      <div class="upload-btn" v-show="_accessoryUrls.length < limit" @click="uploadImg">
        <img src="@/assets/upload.png" alt="" />
      </div>
      <!-- <el-link type="primary" >
                上传
            </el-link> -->
    </template>
    <!-- audio 音频 -->
    <template v-else-if="type === 'audio'">
      <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{ modelValue }}</el-link>
      <el-link
        class="up-btn-link"
        type="primary"
        @click="
          sa.uploadAudio((src) => {
            $emit('update:modelValue', src)
            sa.ok2('上传成功')
          })
        "
        >上传</el-link
      >
    </template>
    <!-- video 视频 -->
    <template v-else-if="type === 'video'">
      <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{ modelValue }}</el-link>
      <el-link
        class="up-btn-link"
        type="primary"
        @click="
          sa.uploadVideo((src) => {
            $emit('update:modelValue', src)
            sa.ok2('上传成功')
          })
        "
        >上传</el-link
      >
    </template>
    <!-- file 文件 -->
    <template v-else-if="type === 'file'">
      <el-link class="file-link" type="info" :href="modelValue" target="_blank" v-if="!sa.isNull(modelValue)">{{ modelValue }}</el-link>
      <el-link
        class="up-btn-link"
        type="primary"
        @click="
          sa.uploadFile((src) => {
            $emit('update:modelValue', src)
            sa.ok2('上传成功')
          })
        "
        >上传</el-link
      >
    </template>

    <!-- 备注信息 -->
    <span class="c-remark" v-if="remark">{{ remark }}</span>
  </el-form-item>
</template>

<script setup name="in-input">
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import dicts from '@/utils/dict'

const props = defineProps({
  // 类型：text、num、password、date、datetime 等等
  type: {
    default: 'text',
  },
  // 标题
  name: {},
  // 绑定值
  modelValue: {},
  // 提示文字
  placeholder: {
    default: '请输入',
  },
  // 备注文字
  remark: {},
  // 是否禁用
  disabled: {},
  // 表单校验
  rules: {},
  required: {
    type: Boolean,
  },
  prop: '',
  uploadType: '', // 上传类型
  limit: {
    type: Number,
    default: 10,
  }, // 上传文件数量
  clearable: {
    type: Boolean,
    default: true,
  },
  dictName: '',  // 字典名
  options: {
    type: Array,
    default: () => []
  },
  hide: {
    type: Boolean,
    default: false
  },
  accessoryUrls: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue','remoteMethod'])
const _accessoryUrls = ref([])
// 监听附件URL变化
watch(
  () => props.accessoryUrls,
  (val) => {
      console.log('accessoryUrls', val);
      if (val && typeof val === 'string') {
      _accessoryUrls.value = val.split(',').filter(url => url.trim() !== '');
      } else if (Array.isArray(val)) {
      _accessoryUrls.value = val;
      } else {
      _accessoryUrls.value = [];
      }
  },
  {
      immediate: true,
      deep: false // 对于基本类型不需要深度监听
  }
);
// 子组件定义自己的 spareValue
const spareValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

// input值发生变化时触发
const onInput = function ($event) {
  // console.log('change', $event)
  proxy.$emit('update:modelValue', $event)
}
const selectChange = function ($event) {
  proxy.$emit('update:modelValue', $event)
}
const uploadImg = function () {
  sa.uploadImage((data) => {
    const accessoryIds = props.modelValue ? props.modelValue + ',' + data.accessoryId : data.accessoryId
    emit('update:modelValue', accessoryIds)
    _accessoryUrls.value.push(data.accessoryUrl)
    sa.ok2('上传成功')
  }, props.uploadType)  
}
// 删除图片
const removeImg = function (index) {
  _accessoryUrls.value.splice(index, 1)
  const accessoryIds = props.modelValue.split(',')
  accessoryIds.splice(index, 1)
  const accessoryIdsStr = accessoryIds.join(',')
  emit('update:modelValue', accessoryIdsStr)
}

const remoteMethod = (query) => {
  console.log('remoteMethod', query)
  emit('remoteMethod',query,props.prop)
}

</script>

<style scoped></style>
